<template>
	<view class="wrap">
		<view class="" style="display: flex;justify-content: space-around;padding: 8px 8px;">
			<view style="display: flex;align-items: center;" v-for="(item,index) in title" @click="selected(index)"
				:key="index" :class="num==index?'xuan':'wei'">
				<view style="margin-right: 3px;">
					{{item.value}}
				</view>
				<view v-if="num==index">
					<up-icon name="arrow-up" color="#FF8E5A"></up-icon>
				</view>
				<view v-else>
					<up-icon name="arrow-down"></up-icon>
				</view>
			</view>
		</view>
		<view v-if="num!==null"
			style="position: absolute;width: 100vw;height: 100vh;z-index: 999;background-color:#B2B2B2;">
			<view v-if="num==0">

			</view>
			<view v-if="num==1">
				<view style="padding: 0 20px 20px;background-color: #FFFFFF;">
					<view style="color: #333333;font-size: 16px;padding: 4px 0;">
						租房类型
					</view>
					<view class="">
						<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
							<view class="uni-px-5">
								<uni-data-checkbox mode="button" v-model="radio1" :localdata="sex1"
									selectedColor='#FF8E5A' @change="change"></uni-data-checkbox>
							</view>
						</uni-section>
					</view>
					<view style="color: #333333;font-size: 16px;margin: 4px 0;">
						租房类型
					</view>
					<view class="">
						<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
							<view class="uni-px-5">
								<uni-data-checkbox mode="button" v-model="radio2" :localdata="sex2"
									selectedColor='#FF8E5A' @change="change"></uni-data-checkbox>
							</view>
						</uni-section>
					</view>
					<button @click="housetype"
						style="background-color: #FF8E5A;color: #FFFFFF;height: 35px;line-height: 35px;margin-top: 20px;">确定</button>
				</view>
			</view>
			<view v-if="num==2">

			</view>
			<view v-if="num==3">

			</view>
			<view v-if="num==4">

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const num = ref(null)
	const title = reactive([{
		value: '区域',
	}, {
		value: '户型',
	}, {
		value: '租金',
	}, {
		value: '租期',
	}, {
		value: '排序',
	}])
	const selected = (index) => {
		if (num.value == index) {
			num.value = null
		} else {
			num.value = index
			console.log(num.value, 888)
		}
	}
	// 户型
	const radio1 = ref()
	const sex1 = reactive([{
		text: '不限',
		value: 0
	}, {
		text: '整租',
		value: 1
	}, {
		text: '合租',
		value: 2
	}])
	const radio2 = ref()
	const sex2 = reactive([{
		text: '不限',
		value: 0
	}, {
		text: '一室',
		value: 1
	}, {
		text: '两室',
		value: 2
	}, {
		text: '三室',
		value: 3
	}, {
		text: '四室',
		value: 4
	}, {
		text: '五室及以上',
		value: 5
	}])
	const housetype = () => {
		num.value = null
	}
	// 以上为户型
</script>


<style lang="scss" scoped>
	.wrap {
		background-color: #ffffff;
		// padding: 4px 0;
		font-size: 14px;
		// position: re;
	}

	.xuan {
		color: #FF8E5A;
	}

	.wei {}
</style>